<template>
<div class="group-body">
  <div class="rule-list">
    <template v-for="(item, index) in rules">
      <rule-container v-if="!item.condition" @removeRow="removeRow(index)" :item.sync="item" v-bind="$attrs"></rule-container>
      <query-builder v-if="item.condition" :class="{ noLine: index === rules.length -1}" :value.sync="item" :showDelete="true" @removeBuilder="removeBuilder(index)" v-bind="$attrs"></query-builder>
    </template>
  </div>
</div>
</template>

<script>
import ruleContainer from '@/components/query-builder/rule-container'
export default {
  name: 'group-body',
  props: ['rules'],
  components: {
    ruleContainer,
    queryBuilder: () => import('./index')
  },
  methods: {
    removeRow (index) {
      this.$emit('removeRow', index)
    },
    removeBuilder (index) {
      const arr = this._.cloneDeep(this.rules)
      arr.splice(index, 1)
      this.$emit('update:rules', arr)
    }
  }
}
</script>

<style scoped lang="scss">
.group-body{
  padding-left: 40px;
  .rule-list {
    padding-top: 20px;
  }
}
</style>
<style>
/*.rule-list .rule-container:first-child .line{*/
/*  height: 80%;*/
/*  top: -30%;*/
/*}*/
.group-container .noLine::before {
  border: none !important;
}
</style>
